<template>
  <div class="rating-detail">
    <div class="editor-wrap"
         v-if="(roleId==4&&name=='name4')||(name=='name5'&&roleId==3)">
      <div class="header">
        <div class="user">
          <span class="placeholder"></span>
          <img :src="avatorImgPath">
          <span>{{userName}}</span>
        </div>
        <div class="rate-star"
             v-if="(roleId==4&&name=='name4')||(name=='name5'&&roleId==3)">
          <div class="rate-star-line rate-star-line1">
            <span>评分</span>
            <Rate show-text
                  v-if="scoreContentsList&&scoreContentsList.length>0"
                  allow-half
                  :disabled="scoreContentsList&&scoreContentsList.length>0"
                  v-model="scoreContentsList[0].score/2||0">
              <span style="color: #f5a623">{{ scoreContentsList[0].score ||0}}</span>
            </Rate>
            <Rate show-text
                  v-else
                  allow-half
                  v-model="selectScore">
              <span style="color: #f5a623">{{ selectScore*2}}</span>
            </Rate>
            <Button type="primary"
                    v-if="scoreContentsList&&scoreContentsList.length==0"
                    @click="savaRate">保存</Button>
          </div>
          <div>
            <Tag :checkable="scoreContentsList&&scoreContentsList.length==0"
                 color="primary"
                 :checked="item.checked&&item.checked==true?true:false"
                 @click.native="(e)=>{tagClick(e,item)}"
                 v-for="(item,index) in contentListChecked"
                 :key="item.contentId">{{item.content}}</Tag>
          </div>
          <!-- <div class="rate-star-line rate-star-line2">
            <span>教学内容丰富有效</span>
            <Rate show-text
                  allow-half
                  v-model="valueCustomText">
              <span style="color: #f5a623">{{ valueCustomText }}</span>
            </Rate>
          </div>
          <div class="rate-star-line rate-star-line3">
            <span>老师教学认真，课堂效率高</span>
            <Rate show-text
                  allow-half
                  v-model="valueCustomText">
              <span style="color: #f5a623">{{ valueCustomText }}</span>
            </Rate>
          </div> -->
        </div>
      </div>
      <editor class="editor"
              ref="studentEditor" />
      <div class="btn-wrap">
        <div class="rating"
             v-if="0">
          <span>评价：</span>
          <RadioGroup v-model="animal">
            <Radio label="好评">好评(11)</Radio>
            <Radio label="中评">中评(22)</Radio>
            <Radio label="差评">差评(33)</Radio>
          </RadioGroup>
        </div>
        <Button @click="sendContent"
                type="primary">发表评论</Button>
      </div>
    </div>

    <ul class="rating-detail-wrap">
      <li class="rating-item"
          v-for="item in commentList">
        <div class="rating-item-root">
          <div class="avatar">
            <img :src="item.photo">

          </div>
          <div class="rating-area">
            <!-- <Rate show-text
                  allow-half
                  disabled
                  v-model="valueCustomText">
              <span style="color: #f5a623">{{ valueCustomText }}</span>
            </Rate> -->
            <div class="name">{{item.name}}</div>
            <div class="rating-content"
                 v-html="item.content"></div>
            <div class="rating-option">
              <div class="replay"
                   v-if="(name!='name4'&&(roleId==3||roleId==4||roleId==2)&&item.userId!=userId)||(name=='name4'&&(roleId==2||roleId==4)&&item.userId!=userId)">
                <Icon type="md-text" />
                <span style="cursor:pointer;"
                      @click="replay(item)">回复</span>
              </div>
              <div class="rating-time">
                <img src="@/assets/img/time.png">
                <span style="color:#aaa;">{{item.discussTime}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span v-if="roleId==1">
                  <Icon type="md-arrow-round-up" title="置顶"
                        @click="savePlaceTopCommentStatus(item.discussId,item.placeStatus)"
                        :style="item.placeStatus==1?'color:#f5a623':''" />
                  <!-- <Icon type="md-create" /> -->
                  <Icon type="md-trash" title="删除"
                        @click="deleteCommentInfo(item)" />
                </span>
              </div>
            </div>
          </div>
        </div>
        <div style="padding-left:80px;">
          <tree-menu :label="item.commentSonNode"
                     :nodes="item.commentSonNode"
                     :name="name"
                     :depth="0"></tree-menu>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import Editor from '_c/editor'
import TreeMenu from '@/components/tree-menu/TreeMenu.vue'
import { saveCommentInfo, savePlaceTopCommentStatus, saveEvaluationContent } from '@/api/data'
import { mapState } from 'vuex'
export default {
  components: {
    Editor,
    TreeMenu,
  },
  mounted () {

  },
  computed: {
    ...mapState({
      roleId: state => state.user.roleId,
      userId: state => state.user.userId,
      loginName: state => state.user.userName,
      userName: state => state.user.name,
      avatorImgPath: state => state.user.avatorImgPath,
    }),
    contentListChecked () {
      if (this.contentList && this.contentList.length > 0) {
        this.contentList.forEach((item, index) => {
          item.checked = false
          if (this.scoreContentsList && this.scoreContentsList.length > 0) {
            this.scoreContentsList.forEach((it) => {
              if (item.contentId == it.contentId) {
                item.checked = true
              }
            })
          }
        });
      }
      return this.contentList
    }
  },
  data () {
    return {
      valueCustomText: 3.8,
      animal: '好评',
      selectScore: 5,
      contentIds: []
    }

  },
  props: ['scoreContentsList', 'commentList', 'courseId', 'name', 'contentList'],
  methods: {
    sendContent () {
      let data = {
        "content": this.$refs.studentEditor.getHtml(),
        "courseId": this.courseId,
        "parentId": '',
        "roleId": this.roleId,
        "userId": this.userId
      }
      saveCommentInfo(data).then((res) => {
        if (res.data == true) {
          this.$Message.success('发表评论成功')
          this.$refs.studentEditor.setHtml('')
          this.$emit('getList')
        } else {
          this.$Message.error('发表评论失败')
        }
      })
    },
    replay (item) {
      this.$emit('replay', item)
    },
    deleteCommentInfo (item) {
      eventBus.$emit('deleteCommentInfo', item)
    },
    savePlaceTopCommentStatus (
      discussId, status
    ) {
      let placeStatus = 1 - status
      let data = {
        placeStatus: placeStatus,
        discussId: discussId
      }
      savePlaceTopCommentStatus(data).then((res) => {
        if (res.data) {
          this.$Message.success('置顶成功')
          eventBus.$emit('courseDetails')
        } else {
          this.$Message.error('置顶失败')
        }
      })
    },
    savaRate () {
      if (this.contentIds && this.contentIds.length == 0) {
        this.$Message.error('请选择标签')
        return
      }
      let data = {
        courseId: this.courseId,
        userId: this.userId,
        roleId: this.roleId,
        score: this.selectScore * 2,
        contentIdList: this.contentIds
      }
      saveEvaluationContent(data).then(res => {
        if (res.data) {
          this.$emit('getList')
          this.$Message.success('评分成功')
        }
      })
    },
    tagClick (e, item) {
      let index = Array.from(e.target.classList).indexOf('ivu-tag-color-white')
      if (index < 0) {
        let y = this.contentIds.indexOf(item.contentId)
        if (y < 0) {
          this.contentIds.push(item.contentId)
        }
      } else {
        let i = this.contentIds.indexOf(item.contentId)
        if (i >= 0) {
          this.contentIds.splice(i, 1)
        }
      }
    }
  }
}
</script>
<style lang="scss">
.editor {
  height: 150px;

  .w-e-text-container {
    position: relative;
    height: 120px !important;
    background: #fff;
  }
}
</style>

